<!DOCTYPE html>
<html>
<head>
    <title>生成PNG图标</title>
</head>
<body>
    <canvas id="canvas16" width="16" height="16" style="border:1px solid #ccc; margin:5px;"></canvas>
    <canvas id="canvas32" width="32" height="32" style="border:1px solid #ccc; margin:5px;"></canvas>
    <canvas id="canvas48" width="48" height="48" style="border:1px solid #ccc; margin:5px;"></canvas>
    <canvas id="canvas128" width="128" height="128" style="border:1px solid #ccc; margin:5px;"></canvas>
    <br>
    <button onclick="downloadIcons()">下载图标</button>
    
    <script>
        function drawQRIcon(canvas, size) {
            const ctx = canvas.getContext('2d');
            const unit = size / 16; // 16x16 网格
            
            // 白色背景
            ctx.fillStyle = '#ffffff';
            ctx.fillRect(0, 0, size, size);
            
            // 黑色前景
            ctx.fillStyle = '#333333';
            
            // 左上角定位点
            drawFinderPattern(ctx, unit, unit, unit * 6);
            // 右上角定位点
            drawFinderPattern(ctx, unit * 9, unit, unit * 6);
            // 左下角定位点
            drawFinderPattern(ctx, unit, unit * 9, unit * 6);
            
            // 时序图案
            for (let i = 8; i < 16; i += 2) {
                ctx.fillRect(i * unit, 6 * unit, unit, unit);
                ctx.fillRect(6 * unit, i * unit, unit, unit);
            }
            
            // 数据点
            const dataPoints = [
                [8,8], [10,8], [12,8], [14,8],
                [8,10], [8,12], [8,14],
                [10,10], [12,12], [14,14],
                [10,14], [14,10], [12,10]
            ];
            
            dataPoints.forEach(([x, y]) => {
                if (x < 16 && y < 16) {
                    ctx.fillRect(x * unit, y * unit, unit, unit);
                }
            });
        }
        
        function drawFinderPattern(ctx, x, y, size) {
            const unit = size / 6;
            
            // 外框
            ctx.strokeStyle = '#333333';
            ctx.lineWidth = unit * 0.2;
            ctx.strokeRect(x, y, size, size);
            
            // 内部填充
            ctx.fillStyle = '#333333';
            ctx.fillRect(x + unit * 0.5, y + unit * 0.5, size - unit, size - unit);
            
            // 中心白色
            ctx.fillStyle = '#ffffff';
            ctx.fillRect(x + unit * 1.5, y + unit * 1.5, size - unit * 3, size - unit * 3);
            
            // 中心黑点
            ctx.fillStyle = '#333333';
            ctx.fillRect(x + unit * 2.5, y + unit * 2.5, size - unit * 5, size - unit * 5);
        }
        
        // 绘制所有尺寸的图标
        drawQRIcon(document.getElementById('canvas16'), 16);
        drawQRIcon(document.getElementById('canvas32'), 32);
        drawQRIcon(document.getElementById('canvas48'), 48);
        drawQRIcon(document.getElementById('canvas128'), 128);
        
        function downloadIcons() {
            const sizes = [16, 32, 48, 128];
            sizes.forEach(size => {
                const canvas = document.getElementById(`canvas${size}`);
                const link = document.createElement('a');
                link.download = `icon${size}.png`;
                link.href = canvas.toDataURL('image/png');
                link.click();
            });
        }
    </script>
</body>
</html>